<template>
  <div class="boxsty">
    <div>
      <div class="kaohe-table-box-title">考核任务</div>
      <div class="kaohe-table-box">
        <table v-model="dataForm">
<!--          表头-->
          <thead>
          <tr>
            <th colspan="7" class="text-left">
              <div>
                <span>被考核人姓名:</span>
                <span>{{ bkhr}}</span>
                <!-- <el-button class="pull-right" type="primary" icon="el-icon-plus" size="mini"
                           @click="addUser"></el-button> -->
              </div>
            </th>
            <th rowspan="2" colspan="4">
              <div class="text-center">
                考核周期：2021年7月1日至12月31日
              </div>
            </th>
          </tr>
          <tr>
            <th colspan="5" class="text-left">
              <span>职务:</span>
              <span>{{ bkhrzwu }}</span>
            </th>
          </tr>
          <tr>
            <th rowspan="2">序号</th>
            <th rowspan="2">任务名称</th>
            <th colspan="2" class="text-center">难度系数</th>
            <th rowspan="2">权重设置%</th>
            <th rowspan="2">工作目标/成效</th>
            <th rowspan="2">数据提供部门</th>
             <th rowspan="2">数据提供人</th>
            <th rowspan="2">评分人</th>
            <th rowspan="2">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="fnAddData"></el-button>
            </th>
          </tr>
          <tr>
            <th>重要程度</th>
            <th>完成难度</th>
          </tr>
          </thead>
<!--          数据-->
          <tbody>
           <tr v-for="(item,index) in dataForm.dataList">
            <td style="width: 50px" class="text-center">{{index+1}}</td>
            <td><el-input v-model="item.taskName" placeholder="请输入任务名称"></el-input></td>
            <td>
              <el-select v-model="item.zycd" placeholder="请选择重要程度">
                <el-option
                  v-for="item in chengduList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.wcnd" placeholder="请选择完成程度">
                <el-option
                  v-for="item in chengduList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-input-number v-model="item.weightset" :max="100" :min="0" placeholder="请输入权重设置"></el-input-number>
            </td>
            <td>
              <el-input v-model="item.workTarget" placeholder="请输入工作目标/成效"></el-input>
            </td>
            <td>
              <el-input v-model="item.dataProvider" placeholder="请输入数据提供部门"></el-input>
            </td>
            <td>
              <el-input v-model="item.createUserName" placeholder="请输入数据提供人"></el-input>
            </td>
            <td>
              <div class="flex">
                <el-input v-model="item.pingfenren" placeholder="请输入评分人"></el-input>
                <el-button type="primary" @click="selectpingfenren(item,index)">选择评分人</el-button>
              </div>
            </td>
            <td>
              <el-button type="danger" icon="el-icon-minus" size="mini" @click="fnDelData(item,index)"></el-button>
            </td>
          </tr>
          <tr >
            <td colspan="10">
              <div>
                说明：1. 重要程度高，是指重点任务对集团层面有重要影响；<br>
                2. 重要程度较高，是指重点任务对公司层面有重要影响；<br>
                3. 重要程度一般，是指重点任务对部门层面有重要影响；<br>
                4. 完成难度高，是指重点任务创新性强、协调难度大；<br>
                5. 完成难度较高，是指重点任务有一定创新性、需要争取政策支持；<br>
                6. 完成难度一般，是指重点任务有一定难度，但有专业团队支持，本部门能够独立承担工作。
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
<!--      按钮-->
      <div class="flex mg-t40 text-center" style="justify-content: space-around;">
        <el-button type="primary" @click="saveDetail">确认#</el-button>
        <el-button type="primary" @click="piliangVisible=true">批量维护#</el-button>
        <!-- <el-button type="primary" @click="fnBackLastPage(2)">返回#</el-button> -->
      </div>
    </div>
    <!--  选择人员信息-->
    <renwufaqiusercomment v-if="renwufaqiusercomment" ref="renwufaqiusercomment" @submitfy="submitfy"></renwufaqiusercomment>
    <pingfenrenusercomment v-if="pingfenrenusercomment" ref="pingfenrenusercomment" @submitfypingfenren="submitfypingfenren"></pingfenrenusercomment>
    <!--    批量维护-->
    <el-dialog
      title="批量维护"
      :visible.sync="piliangVisible"
      width="30%"
      center>
      <div>
        <el-form :model="piliangForm" label-width="150px" >
          <el-form-item label="数据提供部门">
            <el-select v-model="piliangForm.bumen" placeholder="数据提供部门">
              <el-option label="部门1" value="1"></el-option>
              <el-option label="部门2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="评分人">
            <el-select v-model="piliangForm.region" placeholder="评分人">
              <el-option label="评分人1" value="1"></el-option>
              <el-option label="评分人2" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="piliangVisible = false">确定#</el-button>
                <el-button @click="piliangVisible = false">关闭#</el-button>
            </span>
    </el-dialog>
    <el-dialog
      title="任务指标库"
      :visible.sync="renwuzhibiaodialogVisible"
      width="80%">
      <renwuzhibiaoTable ref="renwuzhibiaoRef" @func="getRow"></renwuzhibiaoTable>
      <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="addZhibiao">添 加</el-button>
                    <el-button @click="renwuzhibiaodialogVisible = false">取 消</el-button>
                </span>
    </el-dialog>
  </div>
</template>

<script>
// export default {
//   name: "zhongdian-kaoherenwu-table"
// }

import UserCommonSelect from '@/views/hetongrenwu/components/usercomment-select'
import renwufaqiusercomment from '@/views/hetongrenwu/components/renwufaqiusercomment-select.vue'
import renwuzhibiaoTable from '@/views/hetongrenwu/zhongdianrenwu/zhongdianrwcj/rwfqnew/renwuzhibiaoTable.vue'
import pingfenrenusercomment from '@/views/hetongrenwu/components/pingfenrenusercomment-select.vue'
import {saveZdrwRenwufaqiDetailForAdd} from '@/api/hetongrenwu/zhongdian/renwuchuangjian'

export default {
  components: {
    UserCommonSelect,
    renwufaqiusercomment,
    renwuzhibiaoTable,
    pingfenrenusercomment
  },
  data() {
    return {
      fzbmData: [],
      dataForm: {
        dataList:[]
      },
      chengduList: [
        {name: '高', value: '高'},
        {name: '较高', value: '较高'},
        {name: '一般', value: '一般'}
      ],
      piliangVisible:false,
      usercomment: false,
      piliangForm:{},
      renwufaqiusercomment:false,
      renwuzhibiaodialogVisible:false,
      pingfenrenusercomment:false,
      rowindex:"",
      type:0,
      bkhr:'',
      bkhrzwu:''
    }
  },
  watch: {},
  methods: {
    //初始化
    csh() {
      this.dataForm = {
        dataList:[]
      };
    },
    init(renwuId,renwuName,type,row) {
      this.csh();
      this.type=type;
      this.dataForm.renwuId = renwuId;
      this.dataForm.renwuName = renwuName;
      this.dataForm.bkhName=row.beikaoheName;
      this.dataForm.bkhZhiwu=row.beikaoheZhiwu;
      this.bkhr=row.beikaoheName;
      this.bkhrzwu=row.beikaoheZhiwu;
   
        
    },
    //增加人员
    addUser() {
      this.renwufaqiusercomment = true;
      this.$nextTick(() => {
        this.$refs.renwufaqiusercomment.init('12');
      });
    },
    submitfy(data){
      var names=[];
      var zhiwus=[];
      for(var i=0;i<data.tableDataUser.length;i++){
        names.push(data.tableDataUser[i].userName);
        zhiwus.push(data.tableDataUser[i].userZw);
      }
      this.dataForm.names=names.join(",");
      this.dataForm.zhiwus=zhiwus.join(",");
      this.$forceUpdate();
      this.dataForm.bkhjson=JSON.stringify(data.tableDataUser)
     },
    //选择人员返回的数据
    getDataList(data) {
     //console.log('data:'+JSON.stringify(data))
    },
    //添加表格数据
    fnAddData(){
      this.renwuzhibiaodialogVisible = true
      this.$nextTick(() => {
        this.$refs.renwuzhibiaoRef.getDataList()
      })
    },
    getRow(rows){
      for(var i=0;i<rows.length;i++){
        let objData = {};
        objData["taskName"]=rows[i].taskName;
        objData["weightset"]=rows[i].weightset;
        objData["dataProviderId"]=rows[i].departId;
        objData["dataProvider"]=rows[i].departName;
        objData["createUserName"]=rows[i].createUserName;
        objData["providerId"]=rows[i].createUserId;
        objData["providerName"]=rows[i].createUserName;
        this.dataForm.dataList.push(objData);
       //console.log(this.dataForm)
      }
      this.renwuzhibiaodialogVisible = false
      this.$forceUpdate();

    },
    addZhibiao(){
      this.$refs.renwuzhibiaoRef.saveZhibiao(2)
    },
    submitfypingfenren(data){
      var obj=this.dataForm.dataList[this.rowindex]
      obj["pingfenren"]=data.tableDataUser[0].userName;
      obj["pingfenrenId"]=data.tableDataUser[0].userId;
      this.$forceUpdate();
    },
    selectpingfenren(obj,index) {
      this.rowindex=index;
      this.pingfenrenusercomment = true;
      this.$nextTick(() => {
        this.$refs.pingfenrenusercomment.init('12');
      });
    },
    saveDetail(){
      saveZdrwRenwufaqiDetailForAdd(this.dataForm).then(res => {
        this.$emit('fnBackLastPage','返回原页面')
      })
    },
    //删除表格中的数据
    fnDelData(obj,index){
      this.dataForm.dataList.splice(index, 1);
    },
    //返回上一个页面
    fnBackLastPage(type){
      this.$emit('fnBackLastPage','返回原页面')
    }
  }
}
</script>

<style scoped>
.kaohe-table-box-title {
  border-bottom: solid 1px #0d217e;
}

.kaohe-table-box {
  margin-top: 20px;
}

.kaohe-table-box table {
  width: 100%;
}

.kaohe-table-box table tr td {
  border: solid 1px #ccc;
  padding: 10px;
}

.kaohe-table-box table tr th {
  border: solid 1px #ccc;
  padding: 5px
}
</style>
